<template>
  <div class="repayment">
    <div class="repayment-top">
      <p @click="repaymentDone">完成</p>
    </div>
    <div class="repayment-tab">
      <i></i>
      <h4>还款成功</h4>
      <div class="repayment-groups" v-for="item in groups" :key="item.currency">
        <p>{{item.amount}} {{item.currency}}</p>
      </div>
    </div>
    <div class="repayment-title">
      <span>订单信息</span>
      <p class="title-right" @click="showRepayment">账单还款</p>
    </div>
    <div class="repayment-title info">
      <span>付款方式</span>
      <p class="title-right" @click="showLePurse">乐钱包</p>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data: function() {
    return {
      group: []
    };
  },
  computed: {
    groups() {
      // amount: "48.2526",
      // currency_code: "CNY"
      if (this.group.length > 0) return this.group;
      return this.$store.state.wealthLeShell.repayment_data_groups;
    },
    list() {
      // [
      //   {
      //     amount: "48.2526",
      //     display_amount: "¥48.2526",
      //     name: "人民币",
      //     currency_code: "CNY",
      //     symbol: "¥"
      //   }
      // ]
      return this.$store.state.wealthLeShell.repayment_data.data.bills.list;
    }
  },
  mounted() {
    this.group = this.$route.query.cash;
  },
  methods: {
    repaymentDone() {
      this.$router.push("/wealth");
    },
    showRepayment() {
    },
    showLePurse() {
      this.$router.push("/wealth");
    }
  }
};
</script>

<style scoped>
.repayment {
  /* height: 520px; */
  background-color: #fff;
}
.repayment-top {
  height: 88px;
  line-height: 88px;
  font-family: "PingFangSC-Regular";
  font-size: 30px;
  color: #2086f9;
}
.repayment-top p {
  float: right;
  margin-right: 30px;
}

.repayment-tab {
  /* height: 340px; */
}
.repayment-tab i {
  margin-left: 320px;
  margin-top: 12px;
  display: block;
  width: 110px;
  height: 110px;
  background: url("~assets/img/success@2x.png") no-repeat;
  background-size: 110px 110px;
}
.repayment-tab h4 {
  margin-top: 32px;
  font-size: 32px;
  text-align: center;
  color: rgb(41, 41, 41);
  font-family: "PingFangSC-Medium";
}
.repayment-groups {
  text-align: center;
  margin-top: 24px;
}
.repayment-groups:first-child {
  margin-top: 30px;
}
.repayment-groups p {
  font-size: 32px;
  color: rgb(41, 41, 41);
  font-family: "SFUIDisplay-Medium";
}

.repayment-title {
  /* height: 90px; */
  line-height: 90px;
  margin-left: 30px;
  margin-top: 40px;
  border-bottom: 2px solid #ededf0;
}
.repayment-title.info {
  margin-top: 0px;
  border-bottom: 0;
}
.repayment-title span,
.repayment-title p {
  color: rgb(102, 102, 102);
  font-family: "PingFangSC-Regular";
  font-size: 32px;
}
.repayment-title .title-right {
  float: right;
  text-align: right;
  margin-right: 30px;
  color: rgb(41, 41, 41);
  font-family: "PingFangSC-Regular";
  font-size: 32px;
}
</style>
